<script setup lang="ts">
  import { ref, nextTick, onMounted } from "vue"
  import * as echarts from "echarts"
  import { useEcharts } from "@/hooks/useEcharts"

  const indicator = [
    {
      name: "24-1点",
      max: 100
    },
    {
      name: "22-23点",
      max: 100
    },
    {
      name: "20-21点",
      max: 100
    },
    {
      name: "18-19点",
      max: 100
    },
    {
      name: "16-17点",
      max: 100
    },
    {
      name: "14-15点",
      max: 100
    },
    {
      name: "12-13点",
      max: 100
    },
    {
      name: "10-11点",
      max: 100
    },
    {
      name: "8-9点",
      max: 100
    },
    {
      name: "6-7点",
      max: 100
    },
    {
      name: "4-5点",
      max: 100
    },
    {
      name: "2-3点",
      max: 100
    }
  ]
  const dataList = [
    {
      name: "车辆数量",
      value: [100, 10, 90, 20, 76, 60, 60, 50, 70, 50, 60, 10],
      color: "#005bfc"
    }
  ]

  onMounted(() => {
    getData()
  })

  const echartsRef = ref<HTMLElement>()

  let myChart: echarts.ECharts
  let option: echarts.EChartsOption = {
    radar: {
      shape: "polygon",
      center: ["50%", "50%"],
      radius: "70%",
      indicator: indicator,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#2f94e3"
        }
      },
      splitLine: {
        lineStyle: {
          color: ["#0360a7"]
        }
      },
      splitArea: {
        areaStyle: {
          color: ["#0b2b53"]
        }
      }
    },
    series: [
      {
        name: "车辆数量",
        type: "radar",
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: "rgba(0, 42, 255, 0.5)" },
            { offset: 0, color: "rgba(36, 200, 255, 0.5)" }
          ])
        },
        itemStyle: {
          color: "#fff",
          borderColor: "#249EFF",
          borderWidth: 1.5
        },
        lineStyle: {
          color: "#005bfc"
        },
        data: []
      }
    ]
  }

  const getData = () => {
    myChart && myChart.clear()
    myChart = echarts.init(echartsRef.value as HTMLElement)
    drawEchart()
  }

  const drawEchart = () => {
    const series = []
    for (let i in dataList) {
      series.push(...buildSeries(i))
    }
    // 通过数据添加多个来单独显示每个的tooltip
    // option.series = series
    option.series[0].data = dataList
    console.log("option", option)
    // 通过mousemove添加单项tooltip
    showTooltip()
    useEcharts(myChart, option)
  }

  // 通过mousemove添加单项tooltip
  const showTooltip = () => {
    myChart.on("mousemove", (params) => {
      console.log(params)
      const idx = params.event.topTarget.__dimIdx
      option.tooltip = {}
      if (idx !== undefined) {
        option.tooltip.show = true
        option.tooltip.formatter = function (params2) {
          return `${indicator[idx].name}: ${params2.data.value[idx]}辆`
        }
      } else {
        option.tooltip.show = false
        option.tooltip.formatter = function () {
          return ""
        }
      }
      useEcharts(myChart, option)
    })
  }
  // 通过数据添加多个来单独显示每个的tooltip
  const buildSeries = function (dataIndex) {
    const data = dataList[dataIndex].value
    const helper = data.map((item, index) => {
      const arr = new Array(data.length)
      arr.splice(index, 1, item)
      return arr
    })
    return [data, ...helper].map((item, index) => {
      return {
        name: dataList[dataIndex].name,
        type: "radar",
        itemStyle: {
          color: "#fff",
          borderColor: dataList[dataIndex].color,
          borderWidth: 1.5
        },
        lineStyle: {
          color: dataList[dataIndex].color
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 1, color: "rgba(0, 42, 255, 0.5)" },
            { offset: 0, color: "rgba(36, 200, 255, 0.5)" }
          ])
        },
        tooltip: {
          show: index === 0 ? false : true,
          formatter: () => {
            let res = indicator[index - 1]?.name + "：<br>"
            for (let x of dataList) {
              let str =
                '<i style="display: inline-block;width: 10px;height: 10px;background: ' +
                x.color +
                ';margin-right: 5px;border-radius: 50%;}"></i>' +
                x.name +
                "：" +
                x.value[index - 1]
              res += str
            }
            console.log(9988899, res)
            return res
          }
        },
        z: index === 0 ? 1 : 2,
        data: [item]
      }
    })
  }
</script>
<template>
  <div class="main-content">
    <div style="flex: 1">
      <div ref="echartsRef" class="echartsBox" />
    </div>
  </div>
</template>
<style scoped lang="scss">
  .main-content {
    width: 800px;
    height: 500px;
    display: flex;
    position: relative;
    background-color:  #fff;
  }
  .echartsBox {
    width: 100%;
    height: 100%;
  }
  .l-box {
    width: 100%;
    height: 80%;
    overflow-y: auto;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .l-box-item {
      display: flex;
      align-items: center;
      width: 47%;
      margin: 10px 3px 0 3px;
      padding: 2px 0 2px 10px;
      border-left: 2px solid  #009dff;
      border-bottom: 1px solid  #009dff;
      background: linear-gradient(to right,  #009dff,  #009dff);
      height: 28px;
      .l-box-item-line {
        font-size: 14px;
        color: #009dff;
      }
    }
    .dot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
      border: 1px solid transparent;
      border-color: #009dff;
      .dot-in {
        width: 6px;
        height: 6px;
        display: inline-block;
        border: 1px solid transparent;
        background: #009dff;
      }
    }
  }
</style>
